<template>
    <!-- 有子菜单 -->
    <el-sub-menu v-if="menu.children && menu.children.length != 0" :index="menu.path">
        <template #title>
            <el-icon v-if="menu.icon">
                <component :is="menu.icon"></component>
            </el-icon>
            <span>{{ menu.menuName }}</span>
        </template>

        <MenuItem :menu="item" v-for="(item) in menu.children" :key="item.name">
        </MenuItem>
    </el-sub-menu>

    <!-- 没有子菜单 -->
    <el-menu-item v-else :index="menu.path" @click="openTab(menu)">
        <el-icon color="#fff" v-if="menu.icon">
            <component :is="menu.icon"></component>
        </el-icon>
        <template #title>
            <span>{{ menu.menuName }}</span>
        </template>
    </el-menu-item>
</template>

<script setup>
import { useTabsStore } from '@/store/tabs/index.js'
defineProps(['menu'])

const openTab = (val) => {
    useTabsStore().addTabs(val)
}

</script>

<style></style>